<script setup name="Index">
import { ref } from "vue";
import { checkTodoRefer, confirmRefer } from "@/api/hospital";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const title = import.meta.env.VITE_APP_TITLE;
const role = ref(0);
const showDialog = ref(false);
const refers = ref([]);
const list1 = ref([
  {
    sname: "患者管理",
    tabName: "documment/patient",
  },
  {
    sname: "档案管理",
    tabName: "documment/record",
  },
  {
    sname: "转介申请单",
    tabName: "request/refer",
  },
]);
const list2 = ref([
  {
    sname: "用户管理",
    tabName: "hospital/user",
  },
  {
    sname: "角色管理",
    tabName: "hospital/role",
  },
]);

function checkRefers() {
  const deptId = userStore.deptId;
  checkTodoRefer(deptId).then((res) => {
    if (res.code == 200 && res.total > 0) {
      refers.value = res.data;
      showDialog.value = true;
    } else {
      refers.value = [];
      showDialog.value = false;
    }
  });
}

onMounted(() => {
  role.value = userStore.role;
  checkRefers();
});

function openTab(tab) {
  proxy.$tab.openPage(tab.sname, tab.tabName);
}

function handleClick(item) {
  const referId = item.id;
  proxy.$modal
    .confirm('是否确认接收转介申请编号为"' + referId + '"的转介申请单？')
    .then(function () {
      return confirmRefer(referId);
    })
    .then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess("转介申请单已处理");
        checkRefers();
      }
    })
    .catch(() => {});
}
</script>

<template>
  <div>
    <div class="app-container home">
      <div
        style="
          background-color: #0f3164;
          margin: 0;
          padding: 0;
          height: 150px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div style="color: #fff; font-size: 30px">{{ title }}</div>
      </div>
      <el-text class="mx-1" size="large">
        <h1>患者管理</h1>
      </el-text>
      <el-divider />
      <el-row>
        <el-card
          v-for="item in list1"
          :key="item.sname"
          class="hover-card"
          @click="openTab(item)"
          style="width: 250px; height: 100px; margin: 10px; padding: 15px"
          shadow="always"
        >
          <span style="color: #409eff; font-size: 18px">{{ item.sname }}</span>
        </el-card>
      </el-row>
      <div v-show="role == 99">
        <el-text class="mx-1" size="large">
          <h1>系统管理</h1>
        </el-text>
        <el-divider />
        <el-row>
          <el-card
            v-for="item in list2"
            :key="item.name"
            class="hover-card"
            @click="openTab(item)"
            style="width: 250px; height: 100px; margin: 10px; padding: 15px"
            shadow="always"
            v-show="role >= 0"
          >
            <span style="color: #409eff; font-size: 18px">{{
              item.sname
            }}</span>
          </el-card>
        </el-row>
      </div>
    </div>
    <div>
      <el-dialog title="有转介申请单待处理" width="60%" v-model="showDialog">
        <el-row style="display: flex">
          <el-card
            v-for="item in refers"
            :key="item.referId"
            class="hover-card"
            style="width: 250px; height: 110px; margin: 10px; padding: 3px"
            shadow="always"
            @click="handleClick(item)"
          >
            <div>患者姓名：{{ item.patientName }}</div>
            <div>性别：{{ item.patientGender }}</div>
            <div>转出科室：{{ item.outDeptName }}</div>
            <div>转出时间：{{ item.createDate }}</div>
          </el-card>
        </el-row>

        <template #footer>
          <el-button type="primary" @click="showDialog = false">
            关闭
          </el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
}
.hover-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #f5f7fa;
}
</style>

